<template>
    <div class="page-profile-setting">
        <div class="body">
            <div class="navigator row">
                <div class="title">个人信息</div>

                <!-- 返回按钮 -->
                <div class="left btn-back" @click="onPageBack">
                    <img :src="require('@/assets/icon/page_back_light.png')" />
                </div>
            </div>
            <EditField :option="options.avatarUrl" />
            <EditField :option="options.nickName" />
            <EditField :option="options.gender" />
            <EditField :option="options.location" />

            <div class="btn-account" @click="toAccountsPage">切换账号</div>
            <div class="btn-logout" @click="onLogout">退出登录</div>
        </div>
    </div>
</template>

<script>
import EditField from "./components/editField/index";
export default {
    name: "ProfileSetting",
    components: {
        EditField
    },

    data() {
        return {
            userInfo: {},
            options: {
                avatarUrl: {
                    type: "image",
                    label: "头像",
                    maxlength: 8,
                    key: "avatarUrl",
                    value: ""
                },
                nickName: {
                    type: "text",
                    label: "昵称",
                    maxlength: 12,
                    key: "nickName",
                    value: ""
                },
                gender: {
                    type: "picker",
                    label: "性别",
                    placeholder: "选择性别",
                    maxlength: 8,
                    key: "gender",
                    value: "UNKNOWN",
                    range: [
                        { text: "男", value: "MALE" },
                        { text: "女", value: "FEMALE" },
                        { text: "保密", value: "UNKNOWN" }
                    ]
                },
                location: {
                    type: "area",
                    label: "地址",
                    placeholder: "选择省市",
                    key: "location",
                    value: {}
                }
            }
        };
    },

    created() {
        this.init();
    },

    methods: {
        init() {
            const userInfo = this.$store.state.userInfo;
            Object.keys(userInfo).forEach(k => {
                let v = userInfo[k];
                if (this.options[k]) {
                    this.options[k].value = v;
                }
            });
            console.log(this.options);
        },

        onPageBack() {
            this.$router.go(-1);
        },

        onLogout() {
            this.$showModal({
                title: this.$store.state.userInfo.nickName,
                content: "确认退出当前账号？",
                confirm: () => {
                    this.$router.push({
                        path: "/login/index"
                    });
                }
            });
        },

        toAccountsPage() {
            this.$router.push({ path: "/profile/account" });
        }
    }
};
</script>


<style lang="less" scoped>
.page-profile-setting {
    background: #f5f5f5;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 0 100px 0;
    .body {
        .navigator {
            padding: 20px 0;
            align-items: center;
            .btn-back {
                position: relative;
                z-index: 2;
                padding: 0 30px;
                width: 50px;
            }
        }

        .title {
            position: absolute;
            width: 100%;
            text-align: center;
        }

        .btn-account {
            text-align: center;
            background: #fff;
            color: #4e4e4e;
            padding: 30px 0;
            margin-top: 60px;
        }

        .btn-logout {
            text-align: center;
            background: #fff;
            color: #ee0a24;
            padding: 30px 0;
            margin-top: 30px;
        }
    }
}
</style>